<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
           div {
            margin: 50px auto;
            box-sizing: border-box;
            clear: both;
            width: 160px;
            height: 30px;
            /* background: rgba(231,240,250); */
            /* border: 1px solid red; */

        }

        div span {
            box-sizing: border-box;
            float: left;
            width: 28px;
            height: 28px;
            /* border: 1px solid red; */

            background: url(./img/star.jpg) no-repeat -2px -72px;
        }

        div span.yellow_xing {
            background: url(./img/star.jpg) no-repeat -2px -1px;
        }

        div span.gray_xing {
            background: url(./img/star.jpg) no-repeat -2px -37px;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>
</body>

</html>
<script src="js/jquery-3.6.0.js"></script>
<script>
    $(function(){
        $("span").mouseover(function () {
        let n = $("span").index(this) + 1;
        $("span:lt(" + n + ")").css({ background: "url(./img/star.jpg) no-repeat -2px -1px" });
    })
    $("span").mouseout(function () {
        let n = $("span").index(this) + 1;
        $("span:lt(" + n + ")").css({ background: "url(./img/star.jpg) no-repeat -2px -37px" });
    })
    $("span").click(function () {
        let n = $("span").index(this) + 1;
        $("span").off("mouseout");
        $("span").off("mouseover");
    })
    })
</script>